import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
// 移除 Canvas、DNAModel、StarField 导入，这些只在首页 App.tsx 中使用
// import { Canvas } from '@react-three/fiber';
// import { DNAModel } from '../components/DNAModel';
// import { StarField } from '../components/StarField';

// 游戏模块配置
const gameModules = [
  {
    id: 'dna',
    title: 'DNA转录翻译',
    description: '通过拖拽 tRNA 分子与 mRNA 配对，体验蛋白质合成过程',
    path: '/game/dna', // 更新路径以匹配 App.tsx 中的路由
    color: '#4CAF50'
  },
  {
    id: 'cell-division',
    title: '细胞分裂',
    description: '观察细胞分裂的各个阶段，了解有丝分裂过程',
    path: '/game/cell-division', // 更新路径
    color: '#2196F3',
    disabled: true
  },
  {
    id: 'enzyme',
    title: '酶促反应',
    description: '探索酶与底物的相互作用，理解酶促反应机制',
    path: '/game/enzyme', // 更新路径
    color: '#FF9800',
    disabled: true
  }
];

const Home = () => {
  const navigate = useNavigate();
  // 移除 showModules 状态和 handleStartClick 函数，这些逻辑属于首页
  // const [showModules, setShowModules] = useState(false);
  // const handleStartClick = () => { ... };

  return (
    <div className="home-page"> {/* 使用 home-page 样式 */}
      {/* 移除 3D 背景 Canvas，背景现在由 App.tsx 管理 */}
      {/* <Canvas> ... </Canvas> */}

      {/* 内容区域 */}
      <div className="content"> {/* 可以保留 content 样式用于布局居中等 */}
        {/* 移除首页文本和按钮，这些现在在 App.tsx 的 HomePage 组件中 */}
        {/* <div className="text-container"> ... </div> */}

        {/* 游戏模块卡片网格 */}
        {/* 直接显示模块网格，移除 show 类的控制 */}
        <div className="module-grid show"> 
          {gameModules.map((module) => (
            <div
              key={module.id}
              className={`module-card ${module.disabled ? 'disabled' : ''}`}
              style={{ '--card-color': module.color } as React.CSSProperties}
              onClick={() => !module.disabled && navigate(module.path)}
            >
              <h2>{module.title}</h2>
              <p>{module.description}</p>
              {module.disabled && (
                <div className="coming-soon">即将推出</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Home; 